<template>
    <div style="width: 100%;height: 100%;overflow:hidden;position: relative">
        <pre class="high-pre">
            <code :class="`hljs font-auto-resize code ${wrap ? 'wrap' : ''}`" v-html="codeHtml"/>
        </pre>
        <div class="horizontal" />
        <div class="vertical" />
    </div>
</template>


<script setup>
import hljs from "highlight.js/lib/core"
import { watchEffect } from "vue";

let codeHtml = $ref("")

const props = defineProps({
    code: {
        type: String,
        required: true
    },
    wrap: {
        type: Boolean,
        default: false
    }
})

watchEffect(() => {
    codeHtml = hljs.highlightAuto(props.code).value

})
</script>

<style scoped>
:deep(.hljs) {
    padding: 5px 10px;
}

:deep(code) {
    font-family: inherit;
}

:deep(.code) {
    margin-top: -24px;
    margin-bottom: -36px;
    display: block;
    font-size: 14px;
    line-height: 24px;
    height: 100%;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
    background: transparent;
}

:deep(.horizontal) {
    width: 100%;
    /*height: 10px;*/
    position: absolute;
    bottom: 0;
    left: 0;
    background: #f8f8f8;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}

:deep(.vertical) {
    height: 100%;
    width: 0;
    position: absolute;
    top: 0;
    right: 0;
    background: #f8f8f8;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px
}
</style>

<style>
.high-pre {
    border-radius: var(--border-radius);
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, .3);
    font-family: inherit
}

.wrap {
    word-wrap: break-word;
    white-space: pre-wrap;
}
</style>